<template>
    <VRow class="mt-5" v-if="taskDelivery">
        <VCol md="12">
        <!-- 👉 Product Information -->
        <VCard
            class="mb-6"
            title="任务验收"
        >
        <template #append>
            <VBtn @click="handleSubmit()" :loading="loading" :disabled="disabled" :color="TASK_DELIVERY_CHECK_BUTTON_STYLE[taskDelivery.status].color">
                {{ TASK_DELIVERY_CHECK_BUTTON_STYLE[taskDelivery.status].title }}</VBtn>
        </template>
        <VCardItem>
            <h5 class="text-h5 mb-4">
                        成果图片
                    </h5>
            <div class="px-2 pt-2">
                <VRow v-viewer>
                    <VCol
                        cols="12"
                        md="4"
                        v-for="(item, index) in taskDelivery?.image"
                        >
                        <VCard
                            flat
                            border
                        >
                            <VImg :src="item" />
                        </VCard>
                    </VCol>
                </VRow>
            </div>
            <VDivider class="my-6" />
            <h5 class="text-h5 mb-4">
                        验收备注
                    </h5>
            <div v-html="taskDelivery?.remark" />
            <VDivider class="my-6" />
        </VCardItem>
        

            
            <VCardText>
            <VRow>
                <VCol cols="12">
                    <VRadioGroup 
                        :disabled="disabled"
                        v-model="form.status"
                        inline
                        label="是否验收"
                        :rules="formRules.calculationMethod"
                        >
                        <VRadio
                        label="验收"
                        :value="1"
                        />
                        <VRadio
                        label="拒绝验收"
                        :value="2"
                        />
                    </VRadioGroup>
                </VCol>
                <VCol v-if="form.status == 2">
                    <span class="mb-1">原因</span>
                    <ProductDescriptionEditor
                        :editable = "!disabled"
                        v-model="form.reason"
                        placeholder="这是一条拒绝验收的原因"
                        class="border rounded"
                    />
                </VCol>
            </VRow>
            </VCardText>
        </VCard>

        <!-- 👉 Media -->
        <VCard class="mb-6">

        </VCard>
        </VCol>
    </VRow>
</template>

<script setup>
import { getTaskDelivery,checkTaskDelivery } from '@/api/task'
import { useRoute,useRouter } from "vue-router";
import { computed } from 'vue';

const props = defineProps({
  taskId: {
    type: Number,
    required: true,
  }
})

const loading = ref(false)

const taskDelivery = ref()

const getDelivery = async() => {
    loading.value = true
    const res = await getTaskDelivery(props.taskId).finally(() => loading.value = false)
    taskDelivery.value = res.data
    form.value.id = res.data?.id
    form.value.image = res.data?.image
    form.value.remark = res.data?.remark
    form.value.status = res.data?.status
    form.value.reason = res.data?.reason
}

getDelivery()

const disabled = computed(() => {
    if (loading.value) {
        return true
    }
    if (!taskDelivery.value) {
        return true
    }
    if (taskDelivery.value.status) {
        return true
    }
})

const form = ref({
  id:undefined,
  status:1,
  reason:undefined,
});


const formRules = {
  id:[
    v=>!!v || "交付ID不能为空"
  ],
  status:[
    v=>v!=undefined || "请选择计件方式"
  ],
}

const handleSubmit = async () => {
  loading.value = true
  await checkTaskDelivery(form.value).finally(()=>loading.value = false)
  getDelivery()
}

const TASK_DELIVERY_CHECK_BUTTON_STYLE = {
    0: {title: "提交", color: "primary"},
    1: {title: "已验收", color: "success"},
    2: {title: "拒绝验收", color: "error"},
}


</script>